<template>
  <a-modal
    :title='title'
    :width='1100'
    :visible='visible'
    :confirmLoading='confirmLoading'
    :destroyOnClose='true'
    :footer='true'
    @ok='handleSubmit'
    @cancel='handleCancel'
  >
    <!--    <a-alert style='margin-bottom: 20px' message='当前客户信息' type='info' description='撒大苏打撒旦撒' show-icon />-->
    <div class='table-operator'>
      <a-row>
        <a-col :span='5'>
          <a-button type='primary' icon='plus' @click='handleAdd'>增加服务</a-button>
        </a-col>
        <a-col :span='13'>
          审核状态：
          <a-radio-group v-model='queryParam.status' button-style='solid' @change='handleRefresh(true)'>
            <a-radio-button :value='-1'>
              全部
            </a-radio-button>
            <a-radio-button :value='0'>
              待提交
            </a-radio-button>
            <a-radio-button :value='1'>
              待审核
            </a-radio-button>
            <a-radio-button :value='2'>
              审核通过
            </a-radio-button>
            <a-radio-button :value='3'>
              审核未通过
            </a-radio-button>
          </a-radio-group>
        </a-col>
      </a-row>
    </div>
    <s-table
      ref='table'
      rowKey='package_id'
      :loading='isLoading'
      :columns='columns'
      :data='loadData'
      :pageSize='15'
    >
      <div slot='package_service' slot-scope='text, item'>
        <div v-for='item2 in text'>{{ item2.service_name }}</div>
      </div>
      <div slot='status' slot-scope='text, item'>
        <a-tag v-if='text==0'>待提交</a-tag>
        <a-tag v-if='text==1' color='orange'>待审核</a-tag>
        <a-tag v-if='text==2' color='green'>审核通过</a-tag>
        <a-tag v-if='text==3' color='red'>审核未通过</a-tag>
      </div>

      <div slot='service_desc' slot-scope='text, item'>
        <span v-if='!item.service_desc'>-</span>
        <a-tooltip v-else placement='top'>
          <template slot='title'>
            <span v-html='item.service_desc'></span>
          </template>
          <a>{{ item.service_desc.length <= 10 ? item.service_desc : item.service_desc.substr(0, 10) + '...' }}</a>
        </a-tooltip>
      </div>

      <div class='actions' slot='ht' slot-scope='text, item'>
        签名时间：{{ item.signature_time_text || '-' }}<br />
        <a @click='handleGoContractUrl(item)'>查看合同</a>
        <a @click='handleSignCode(item)'>客户签名</a>
      </div>
      <div class='actions' slot='action' slot-scope='text, item'>
        <a v-if='item.status==3' @click='auditConfirm(item)'>重新提交审核</a>
        <a-popconfirm
          title='确认提交审核?'
          ok-text='确认'
          cancel-text='再想想'
          @confirm='auditConfirm(item)'
        >
          <a v-if='item.status==0'>提交审核</a>
        </a-popconfirm>


        <a @click='handleDetails(item)'>查看详情</a>
        <a @click='handleEdit(item)'>编辑</a>
        <a @click='handleDelete(item)'>删除</a>
      </div>
    </s-table>
    <SaveForm
      ref='SaveForm'
      :corporateType='corporate_type'
      :customerId='queryParam.customer_id'
      @handleSubmit='handleRefresh' />
    <SignCodeModel
      ref='SignCodeModel'
    />
    <DetailsModel ref='DetailsModel' @handleSubmit='handleRefresh' />
  </a-modal>
</template>
<script>
import { STable } from '@/components'
import * as Api from '@/api/customer/package'
import SaveForm from './SaveForm'
import SignCodeModel from './SignCodeModel.vue'
import DetailsModel from '@/views/khgl/shkh/modules/Details.vue'

import store from '@/store'

const publicConfig = store.getters.publicConfig

export default {
  components: {
    STable,
    SaveForm,
    SignCodeModel,
    DetailsModel
  },
  data() {
    return {
      // 对话框标题
      title: '服务列表',
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 表格 loading
      isLoading: false,
      // 表格字段
      columns: [
        {
          title: 'ID',
          dataIndex: 'package_id'
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '服务信息',
          dataIndex: 'package_service',
          scopedSlots: { customRender: 'package_service' }
        },
        {
          title: '服务说明',
          dataIndex: 'service_desc',
          scopedSlots: { customRender: 'service_desc' }
        },
        {
          title: '合同信息',
          dataIndex: 'ht',
          scopedSlots: { customRender: 'ht' }
        },
        {
          title: '创建用户',
          dataIndex: 'store_user.real_name'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '180px',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.list({ ...param, ...this.queryParam })
          .then(response => {
            return response.data.list
          })
      },
      // 查询参数
      queryParam: {
        status: -1,
        customer_id: ''
      },
      corporate_type: '',

      codeVisible: false,
      signCodeSrc: ''
    }
  },
  methods: {
    // 查看详情
    handleDetails(item) {
      this.$refs.DetailsModel.open(item)
    },
    // 显示对话框
    open({ corporate_type }) {
      this.corporate_type = corporate_type
      this.visible = true
    },
    // 添加记录
    handleAdd() {
      this.$refs.SaveForm.add()
    },
    // 编辑记录
    handleEdit(item) {
      this.$refs.SaveForm.edit(item)
    },
    auditConfirm(item) {
      const app = this
      Api.subAudit({ apiId: item['package_id'], form: { status: 1 } })
        .then(result => {
          app.$message.success(result.message, 1.5)
          app.handleRefresh()
        })
    },
    // 删除记录
    handleDelete(item) {
      const app = this
      const modal = this.$confirm({
        title: '您确定要删除该记录吗?',
        content: '删除后不可恢复',
        onOk() {
          return Api.deleted({ apiId: item['package_id'] })
            .then(result => {
              app.$message.success(result.message, 1.5)
              app.handleRefresh()
            })
            .finally(result => modal.destroy())
        }
      })
    },

    hasEmptyValue(arr) {
      return arr.some(obj => Object.values(obj).some(value => value === ''))
    },

    handleSignCode({ package_id }) {
      this.$refs.SignCodeModel.open('http://ht.szhxvip.com/index/package/signatureContract/package_id/' + package_id)
    },

    handleGoContractUrl({ contract_url }) {
      window.open('https://view.officeapps.live.com/op/view.aspx?src=' + publicConfig.HTTP + contract_url)
    },

    // 确认按钮
    handleSubmit(e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      // 表单验证
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
    },

    // 提交到后端api
    onFormSubmit(values) {
      var api
      if (this.mode === 'add') {
        if (this.hasEmptyValue(this.fwnr)) {
          this.$message.error('请完善服务内容！')
          return false
        }
        values.serviceTable = this.fwnr
        api = Api.add({ form: values })
      } else {
        api = Api.edit({ apiId: this.record['customer_id'], form: values })
      }
      this.confirmLoading = true

      api.then(result => {
        // 显示成功
        this.$message.success(result.message, 1.5)
        // 关闭对话框
        this.handleCancel()
        // 通知父端组件提交完成了
        this.$emit('handleSubmit', values)
      })
        .finally(result => {
          this.confirmLoading = false
        })
    },
    /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    }
  }
}

</script>
<style scoped lang='less'>

</style>
